<template>
  <div id="app">
    <!--
      进入新页面时，
      原页面（首页）会执行一个从屏幕中展示的位置，从右到左移出屏幕的动画。 同时新页面（商品列表）执行一个从屏幕右侧， 从右到左移动到屏幕中
      退出页面时
      相反进行
      -->

      <!--
        页面过度效果实现逻辑
        1、创建动画css
        2、判断当前是需要执行 跳转动画（进入新页面）还是后退动画
          1、监听路由对象 $router
          2、让页面跳转的时候，携带包含跳转标记的 param ，通过param中跳转标记的判断，来判断当前是否为跳转动画，
          3、如果当前param包含标记，则当前为跳转动画，否则当前为后退动画
        3、通过 transition 的方式来为 router-view 指定对应的动画效果
       -->

       <!--
          页面跳转的滑动状态保存
          1、所有组件都会被保存下来
          2、需要在组件中创建一个变量（会被 keepAlive 保存起来），通过这个变量来记录滑动距离
          3、当后退回该页面的时候， 使用这个变量来改变当前页面的一个滑动距离
            1、应该在什么时机改变当前页面的滑动距离？
            2、可以在组件的active（keep-alive组件被激活的时候才能被调用）方法中去指定页面滑动距离
        -->
       <transition :name="transitionName">
         <!-- 所有通过 router-view 加载的页面组件都会被缓存 -->
         <keep-alive :include="virtualTaskStack">
           <router-view/>
         </keep-alive>
       </transition>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      transitionName: 'fold-left',
      // 虚拟任务栈
      virtualTaskStack: [
        'imooc'
      ]
    }
  },
  watch: {
    // 监听路由对象，决定使用哪种过度效果
    '$route' (to, from) {
      // 获取携带的标记
      const routerType = to.params.routerType
      if (routerType === 'push') {
        // 当进入新页面时，保存新页面名称到虚拟栈
        this.virtualTaskStack.push(to.name)
        // 跳转页面
        this.transitionName = 'fold-left'
      } else {
        // 执行后退操作时，把最后一个页面从任务栈中弹出
        this.virtualTaskStack.pop()
        // 后退页面
        this.transitionName = 'fold-right'
      }

      // 初始化虚拟任务栈
      if (to.params.clearTask) {
        this.virtualTaskStack = ['imooc']
      }
    }
  }
}
</script>

<style lang="scss">
@import '@css/style.scss';

  #app {
    width: 100%;
    height: 100%;

    // push页面时：新页面进入动画
    .fold-left-enter-active {
      animation-name: fold-left-in;
      animation-duration: 0.4s;
    }
    @keyframes fold-left-in {
      0% {
        transform: translate(100%, 0);
      }
      100% {
        transform: translate(0, 0);
      }
    }

    // push页面时：原页面退出动画
    .fold-left-leave-active {
      animation-name: fold-left-out;
      animation-duration: 0.4s;
    }
    @keyframes fold-left-out {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(-100%, 0);
      }
    }

    // 后退页面时：即将展示页面动画
    .fold-right-enter-active {
      animation-name: fold-right-in;
      animation-duration: 0.4s;
    }
    @keyframes fold-right-in {
      0% {
        transform: translate(-100%, 0);
      }
      100% {
        transform: translate(0, 0);
      }
    }

    // 后退页面时：即将展示页面动画
    .fold-right-leave-active {
      animation-name: fold-right-out;
      animation-duration: 0.4s;
    }
    @keyframes fold-right-out {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(100%, 0);
      }
    }
  }

</style>
